<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="navigation">
    <!-- 基本配置 -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">

    <!-- 图标标题 -->
    <link rel="icon" th:href="@{/favicon.ico}" type="image/icon"/>
    <title>导航栏</title>

    <!-- css插件 -->
    <!-- font-awesome -->
    <link th:href="@{/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet" media="screen">
    <!-- jVectorMap -->
    <link rel="stylesheet" th:href="@{/plugins/jquery-jvectormap-2.0.5/jquery-jvectormap-2.0.5.css}"/>
    <!-- simpleBar -->
    <link rel="stylesheet" th:href="@{/plugins/simplebar/dist/simplebar.css}"/>
    <!-- perfect-scrollbar -->
    <link rel="stylesheet" th:href="@{/plugins/perfect-scrollbar-1.5.5/css/perfect-scrollbar.css}"/>
    <!-- metisMenu -->
    <link rel="stylesheet" th:href="@{/plugins/metisMenu/dist/metisMenu.min.css}"/>
    <!--layUI-->
    <link rel="stylesheet" th:href="@{/plugins/layui-v2.8.18/layui/css/layui.css}">
    <!-- pace -->
    <link rel="stylesheet" th:href="@{/plugins/pace/pace.min.css}"/>
    <!-- bootstrap -->
    <link crossorigin="anonymous" rel="stylesheet" th:href="@{/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css}">
    <!-- 自定义 -->
    <link rel="stylesheet" th:href="@{/assets/css/public/style.css}" type="text/css" >
    <link rel="stylesheet" th:href="@{/assets/css/public/app.css}">
    <link rel="stylesheet" th:href="@{/assets/css/public/icons.css}">
    <link rel="stylesheet" th:href="@{/assets/css/public/dark-theme.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css/public/semi-dark.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css/public/header-colors.css}"/>

    <!-- js插件 -->
    <!-- bootstrap -->
    <script crossorigin="anonymous" th:src="@{/plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js}"></script>
    <script th:src="@{/plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js}"></script>
    <!--layUI-->
    <script th:src="@{/plugins/layui-v2.8.18/layui/layui.js}"></script>
    <!-- pace -->
    <script th:src="@{/plugins/pace/pace.min.js}"></script>
    <!-- jquery -->
    <script th:src="@{/plugins/jquery-3.5.1/jquery-3.5.1.min.js}"></script>
    <!-- simpleBar -->
    <script th:src="@{/plugins/simplebar/dist/simplebar.min.js}"></script>
    <!-- metisMenu -->
    <script th:src="@{/plugins/metisMenu/dist/metisMenu.min.js}"></script>
    <!-- perfect-scrollbar -->
    <script th:src="@{/plugins/perfect-scrollbar-1.5.5/dist/perfect-scrollbar.js}"></script>
    <!-- jVectorMap -->
    <script th:src="@{/plugins/jquery-jvectormap-2.0.5/jquery-jvectormap-2.0.5.min.js}"></script>
    <!-- chartJs -->
    <script th:src="@{/plugins/chartjs/Chart.min.js}"></script>
    <script th:src="@{/plugins/chartjs/Chart.extension.js}"></script>

</head>

<body>
<div class="wrapper">
    <!-- 侧边栏部分 -->
    <div class="sidebar-wrapper" data-simplebar="true" id="sideBar">
        <div class="sidebar-header" id="header">
            <div>
                <h4 class="logo-text">疫物易物</h4>
            </div>
            <div class="toggle-icon ms-auto">
                <i class='bx bx-arrow-to-left'></i>
            </div>
        </div>
        <!-- 菜单栏 -->
        <ul class="metismenu" id="menu">
            <li>
                <a th:href="@{/create}">
                    <div class="parent-icon">
                        <i class='lni lni-pencil'></i>
                    </div>
                    <div class="menu-title">创建订单</div>
                </a>
            </li>
            <li>
                <a th:href="@{/query}">
                    <div class="parent-icon">
                        <i class="bx bx-scan"></i>
                    </div>
                    <div class="menu-title">物流查询</div>
                </a>
            </li>
            <li>
                <a th:href="@{/history}">
                    <div class="parent-icon">
                        <i class="bx bx-timer"></i>
                    </div>
                    <div class="menu-title">历史订单</div>
                </a>
            </li>
            <li>
                <a th:href="@{/residentExtra}">
                    <div class="parent-icon">
                        <i class='bx bx-box '></i>
                    </div>
                    <div class="menu-title">多余物资发布</div>
                </a>
            </li>
            <li>
                <a th:href="@{/logout}">
                    <div class="parent-icon">
                        <i class='lni lni-exit'></i>
                    </div>
                    <div class="menu-title">退出</div>
                </a>

            </li>
        </ul>
    </div>

    <!-- 导航栏部分 -->
    <header id="navBar">
        <div class="topbar d-flex align-items-center">
            <nav class="navbar navbar-expand">
                <div class="mobile-toggle-menu">
                    <i class='bx bx-menu'></i>
                </div>
                <div class="search-bar flex-grow-1">
                    <div class="position-relative search-bar-box">
                        <input class="form-control search-control" type="text">
                        <span class="position-absolute top-50 search-show translate-middle-y">
                            <i class='bx bx-search'></i>
                        </span>
                        <span class="position-absolute top-50 search-close translate-middle-y">
                            <i class='bx bx-x'></i>
                        </span>
                    </div>
                </div>
                <div class="top-menu ms-auto">
                    <ul class="navbar-nav align-items-center">
                        <li class="nav-item mobile-search-icon">
                            <a class="nav-link" href="#">
                                <i class='bx bx-search'></i>
                            </a>
                        </li>
                        <li class="nav-item dropdown dropdown-large">
                            <div class="dropdown-menu dropdown-menu-end">
                                <div class="header-notifications-list"></div>
                            </div>
                        </li>
                        <li class="nav-item dropdown dropdown-large">
                            <div class="dropdown-menu dropdown-menu-end">
                                <div class="header-message-list"></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="sysUser-box dropdown">
                    <a aria-expanded="false"
                       class="d-flex align-items-center nav-link dropdown-toggle dropdown-toggle-nocaret"
                       data-bs-toggle="dropdown" href="javascript:;" style="text-decoration: none" role="button">
                        <img alt="sysUser avatar" class="sysUser-img" th:src="@{/img/avatars/user1.png}">
                        <div class="sysUser-info ps-3">
                            <p class="sysUser-name mb-0" th:text="${session.user.getUserName()}"></p>
                            <p class="designattion mb-0" th:if="${session.user.getRoleId()==1}">派送员</p>
                            <p class="designattion mb-0" th:if="${session.user.getRoleId()==2}">居民</p>
                            <p class="designattion mb-0" th:if="${session.user.getRoleId()==3}">管理员</p>
                        </div>
                    </a>
                </div>
            </nav>
        </div>
    </header>
</div>

<!-- 页脚部分 -->
<div id="footerBar">
    <div class="overlay toggle-icon"></div>
    <a class="back-to-top" href="javaScript:;">
        <i class='bx bxs-up-arrow-alt'></i>
    </a>
    <footer class="page-footer">
        <p class="mb-0">Copyright © 2021. All right reserved.</p>
    </footer>
</div>

<!-- 自定义 -->
<script th:src="@{/js/public/index.js}"></script>
<script th:src="@{/js/public/app.js}"></script>

</body>

</html>
